<template>
    <div class="list" ref="wrapper">
        <div>
            <div class="area">
                <div class="title border-topbottom">当前城市</div>
                <div class="button-list">
                    <div class="button-wrapper">
                        <div class="button">上海</div>
                    </div>
                    <div class="button-wrapper">
                        <div class="button">上海</div>
                    </div>
                    <div class="button-wrapper">
                        <div class="button">上海</div>
                    </div>
                    <div class="button-wrapper">
                        <div class="button">上海</div>
                    </div>
                </div>
            </div>

        </div>
        <div class="area">
            <div class="title border-topbottom">热门城市</div>
            <div class="button-list">
                <div class="button-wrapper"
                    v-for="item of hot"
                    :key="item.id"
                >
                    <div class="button">{{item.name}}</div>
                </div>
        </div>
        </div>
        <div class="area" v-for="(item,index) in cities" :key="index">
            <div class="title border-topbottom">
                {{index}}
            </div>
            <div class="item-list">
                <div class="item border-bottom" v-for="innerItem of item" :key=innerItem.id>{{innerItem.name}}</div>
            </div>
        </div>
    </div>
</template>
<script>
import Bsroll from 'better-scroll';
export default {
    name:"CityList",
    props:{
        hot:Array,
        cities:Object
    },
    data(){
        return {
            scroll:null
        }
    },
    mounted(){
        this.scroll = new Bsroll(this.$refs.wrapper,{
            probeType: 3,
            click: true
        });          
    }
}
</script>
<style lang="stylus" scoped>
    @import '~@/assets/style/varibles.styl';
    .border-topbottom 
        &:before 
            border-color: #ccc
        &:after
            border-color: #ccc
    .border-bottom
        &:before
            border-color: #ccc
    .list
        position: absolute
        // overflow: hidden
        top: 1.68rem
        left: 0
        right: 0
        bottom: 0
        .title
            line-height: .54rem
            background: #eee
            padding-left: .2rem
            color: #666
            font-size: .26rem
        .button-list
            overflow: hidden
            padding: .1rem .6rem .1rem .1rem
                
            .button-wrapper
                float:left
                width: 33.33%
                .button
                    margin: .1rem
                    padding: .1rem 0
                    text-align: center
                    border: .02rem solid #ccc
                    border-radius: .06rem
        .item-list
            .item
                line-height: .76rem
                padding-left: .2rem   

        

</style>